
<template>
	<compWrapper title="基本信息" theme="primary">
		<compFormEdit
			col="1"
			class="margin-layout width-60per"
			ref="formbase"
			:formdata="getBase"
			v-model="formData"
			:labelWidth="120"
		/>
		<ButtonGroup class="text-right" v-if="type!=='query'">
			<Button type="primary" class="margin-right-10" @click="submit">确认</Button>
			<Button @click="close">返回</Button>
		</ButtonGroup>
		<Sign loading size="large" transfer v-if="loading"></Sign>
	</compWrapper>
</template>

<script>
import mixin from '../mixin';
// import Markdown from 'markdown';
import { HttpSaveTemplate, HttpTemplate } from '../../../service/notice';

export default {
	mixins: [mixin],
	data() {
		return {
			loading: false,
			formData: {
				content: ""
			},
			type: this.$route.params.type,
			id: this.$route.query.id,
			paramsText: `<div>
                    <p><strong>特定类型特定参数：</strong></p>
                    <p><strong>类型：系统检测</strong></p>
					<div>%tags% 检查标签</div>
					<div>%datas% 检查关联数据</div>
                    <br />

                    <p><strong>类型：SKU缺货</strong></p>
					<div>%erpSkus% 关联SKU列表</div>
					<br />

                    <p><strong>类型：渠道SKU无法关联</strong></p>
					<div>%sellerSkus% 关联sellerSku列表</div>
					<br />

                    <p><strong>类型：Fedex账单导入异常</strong></p>
					<div>%relErrMsg% 关联错误信息</div>
					<div>%importAt% 导入时间</div>
					<div>%trackingNos% 关联trackingNos列表</div>
					<br />

                    <p><strong>类型：入库计划审核 / 调拨计划审核 / 预约计划审核</strong></p>
                    <div>%auditOrderNo% 审核关联单据编号</div>
					<div>%auditOrderId% 审核关联单据Id</div>
					<div>%auditOrgId% 来源所属组织Id</div>
					<div>%auditOrgCode% 来源所属组织Code</div>
					<div>%auditOrgName% 来源所属组织名称</div>
					<div>%auditSubmitAt% 审核提交时间</div>
                    <br />

                    <p><strong>类型：欠费通知 / 账户余额不足告警通知 / 信用额度不足告警通知</strong></p>
                    <div>%amountCurrent% 当前总额</div>
					<div>%amountAlertMin% 总额预警下限</div>
					<div>%amountAlertMax% 总额预警上限</div>
                    <br />

                    <p><strong>类型：退货回传异常 / 库存异动回传异常 / 调拨出库回传异常 / 调拨入库回传异常</strong></p>
					<div>%callbackErrMsg% 回传异常消息</div>
					<div>%callbackErrAt% 回传异常时间</div>
					<br />

					<p><strong>公共参数：</strong></p>

					<div class="inline-block width-45per">%lineId% 项目id</div>
					<div class="inline-block width-45per">%lineCode% 项目Code</div>
					<div class="inline-block width-45per">%lineName% 项目名称</div>

					<div class="inline-block width-45per">%accountId% 渠道id</div>
					<div class="inline-block width-45per">%accountCode% 渠道Code</div>
					<div class="inline-block width-45per">%accountName% 渠道名称</div>

					<div class="inline-block width-45per">%orgwarehouseId% 组织仓库id</div>
					<div class="inline-block width-45per">%orgwarehouseCode% 组织仓库Code</div>
					<div class="inline-block width-45per">%orgwarehouseName% 组织仓库名称</div>

					<div class="inline-block width-45per">%evId% 事件id </div>
					<div class="inline-block width-45per">%evtpId% 事件类型id</div>
					<div class="inline-block width-45per">%env_label% 环境标识</div>
					<div class="inline-block width-45per">%level% 事件级别</div>
					<div class="inline-block width-45per">%level_label% 事件级别标识</div>
					<div class="inline-block width-45per">%traceId% 事件追踪id</div>
					<div class="inline-block width-45per">%resId% 事件资源id</div>
					<div class="inline-block width-45per">%eventTitle% 事件标题</div>
					<div class="inline-block width-45per">%eventLabel% 事件标识</div>
					<div class="inline-block width-45per">%eventCode% 事件代码</div>
					<div class="inline-block width-45per">%eventMsg% 事件消息</div>
                    <br />
			</div>`
		}
	},
	created() {
		this.getDetial();
	},
	mounted() {
		// setTimeout(() => {
		// 	this.initEdit();
		// }, 1000)
	},
	methods: {
		// initEdit() {
		// 	const { editor, preview } = this.$refs;
		// 	const value = this.formData.content = editor.value;
		// 	preview.innerHTML = Markdown.markdown.toHTML(value);
		// },
		//获取模板数据
		getDetial() {
			if (this.type === 'add') return;
			this.loading = true;
			HttpTemplate({ id: this.id }).then(res => {
				const data = res.data || {};
				this.formData = data.entity;
				// this.formData.isGlobal = data.isGlobal;
				this.loading = false;
			}).catch(err => {
				this.loading = false;
				this.$Message.error(err.message);
			})
		},
		//保存模板数据
		async submit() {
			const valid = await this.$refs.formbase.validate();
			if (!valid) return;
			this.loading = true;
			HttpSaveTemplate(this.formData).then(this.close).catch(err => {
				this.loading = false;
				this.$Message.error(err.message);
			})
		},
		close() {
			this.$router.push({
				name: 'noticeTemplate'
			})
		}
	},
	computed: {
		getBase() {
			return [
				// {
				// 	label: "模板名称",
				// 	key: "title",
				// },
				{
					label: "类型",
					key: "bizeventTypeId",
					tag: "Select",
					options: this.getNoticeEevntTypes
				},
                {
                    label: "状态",
                    key: "active",
                    tag: "Select",
                    options: this.getTemplateStatus,
                    props: {
                        strict: true,
                    },
                },
				{
					label: "通知标题",
					key: "title",
					// required: false,
				},
				{
					label: "描述",
					key: "brief",
					tag: "Input",
                    props:{
                        type:'textarea'
                    },
					required: false,
				},
				{
					label: "链接",
					key: "url",
					required: false,
				},
				{
					label: "模板参数",
					valueText: this.paramsText,
					query: true,
				},
				{
					label: "内容",
					key: "content",
					tag: "Input",
					class: "padding-10 block",
					props: {
                        type:'textarea',
						rows: 12
					}
				},

			]
		}
	}
}
</script>


